<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    	<title>统战成员学习平台</title>
	    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
	    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
	</head>
	<body class="white">
		<div id='app' style="display:none" v-show="true">
			<div class="question_no">
				<div>
					<i class="icon_question_list"></i><strong>{{currentIndex + 1}}</strong>/{{questions.length}}
				</div>
			</div>
			<div v-if="questions[currentIndex]" class="question check">
				<p class="ui_border_b"><span>{{questions[currentIndex].qustTypeName}}</span>{{questions[currentIndex].qustTitle}}</p>
				<ul v-if="questions[currentIndex].qustType === '410001' || questions[currentIndex].qustType === '410002'">
					<li v-for="item of questions[currentIndex].optionList" class="ui_border_b">
						<div class="label">
							<div>
								<input v-if="questions[currentIndex].qustType === '410002'" type="checkbox" name="raido" :value="item.optionId" v-model="questions[currentIndex].userAnwser">
								<input v-if="questions[currentIndex].qustType !== '410002'" type="radio" name="raido" :value="item.optionId" v-model="questions[currentIndex].userAnwser">
								<span :class="{'dui': questions[currentIndex].qustType === '410001'}">{{item.index}}</span>
							</div>
							{{item.optionTitle}}
						</div>
					</li>
				</ul>
				<ul v-if="questions[currentIndex].qustType === '410003'">
					<li class="ui_border_b">
						<label for="raido1">
							<div>
								<input type="radio" id="raido1" name="raido" value="1" v-model="questions[currentIndex].userAnwser">
								<span></span>
							</div>正确
						</label>
					</li>
					<li class="ui_border_b">
						<label for="raido2">
							<div>
								<input type="radio" id="raido2" name="raido" value="0" v-model="questions[currentIndex].userAnwser">
								<span></span>
							</div>错误
						</label>
					</li>
				</ul>
			</div>
			<div v-if="questions[currentIndex]" class="answers">
				<p>正确答案：{{questions[currentIndex].answer}}</p>
				<p>您的答案：{{questions[currentIndex].myAnswer}}</p>
			</div>
			<div class="question_btn">
				<span v-if="currentIndex > 0" @click="prev()" tapmode="tap" class="prev">上一题</span>
				<span v-if="currentIndex < (questions.length - 1)" @click="next()" tapmode="tap" class="next">下一题</span>
			</div>
		</div>
		<script type="text/javascript" src="../../script/api.js"></script>
		<script type="text/javascript" src="../../script/vue.min.js"></script>
		<script type="text/javascript" src="../../script/common.js"></script>
		<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
		<script type="text/javascript">
		    new Vue({
				el: '#app',
		     	data: {
					currentIndex: 0,
					questions:  []
		     	},
				mounted: function() {
		        	var $this = this;
		        	apiready = function() {
						$this.currentIndex = api.pageParam.index;
						$this.init();
						parseTapmode();
                	}
		    	},
		    	methods: {
					init: function() {
						var $this = this,
							list = [];
						var questions = $api.getStorage(_.EXAMEDANSWER);
						var myAnswer, answer;
						questions.forEach(function(item) {
							myAnswer = [], answer = [];
							if(item.qustType === '410001') {
								item.optionList.forEach(function(option) {
									if(item.userAnwser === option.optionId) {
										item.myAnswer = option.index;
									}
									if(item.answer === option.optionId) {
										item.answer = option.index;
									}
								})
							} else if(item.qustType === '410002') {
								item.answer = item.answer.split(',');
								item.optContent.forEach(function(option) {
									item.userAnwser.some(function(answer) {
										if(answer === option.optionId) {
											myAnswer.push(option.index);
											return true;
										}
									})
									item.answer.some(function(answer) {
										if(answer === option.optionId) {
											answer.push(option.index);
											return true;
										}
									})
								});
								item.myAnswer = myAnswer.join(',');
								item.answer = answer.join(',');
							} else {
								item.myAnswer = item.userAnwser == '1' ? '正确' : '错误';
								item.answer = item.answer == '1' ? '正确' : '错误';
							}
							list.push(item);
						})
						$this.questions = list;
					},
					prev: function() {
						var $this = this;
						if($this.currentIndex === 0) return;
						$this.currentIndex--;
					},
					next: function() {
						var $this = this;
						if($this.currentIndex === ($this.questions.length-1)) return;
						$this.currentIndex++;
					}
		    	}
		    });
		</script>
	</body>
</html>
